<template>
	<div>
		<div style="margin-bottom: 20px">
			<el-dropdown trigger="click" @command="handleCommand">
				<el-button type="primary">
					{{ state.projectNames }}<el-icon class="el-icon--right"></el-icon>
				</el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item
							v-for="item in state.selectList"
							:key="item.projectId"
							:command="item"
							>{{ item.projectName }}</el-dropdown-item
						>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<el-tabs v-model="state.activeName" class="demo-tabs">
			<el-tab-pane label="基础信息" name="0">
				<el-form
					:model="formInline"
					ref="formInlineRef"
					class="demo-form-inline"
					label-width="120px"
					:disabled="false"
				>
					<el-row>
						<el-col :span="8">
							<el-form-item label="项目名称">
								<el-input
									v-model="formInline.projectName"
									placeholder="项目名称"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目编号">
								<el-input
									v-model="formInline.projectName"
									placeholder="项目编号"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="projectType != 3">
							<el-form-item label="任务来源">
								<el-input v-model="formInline.projectName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="projectType != 3">
							<el-form-item label="关联项目集">
								<el-input v-model="formInline.projectName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="关联项目集">
								<el-select v-model="formInline.projectName" placeholder="">
									<!-- <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option> -->
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目分类">
								<el-select v-model="formInline.projectName" placeholder="">
									<!-- <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option> -->
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="业务单元">
								<el-input v-model="formInline.businessUnit"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="计划实施时间范围">
								<el-input v-model="formInline.predictStartTime"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目位置">
								<el-input v-model="formInline.predictStartTime"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目详细地址">
								<el-input v-model="formInline.predictStartTime"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="col_h" label="拟计划总投额和实际总投额">
								<el-input v-model.number="formInline.predictStartTime">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目类型" prop="projects">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目立项部门" prop="projects">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目负责人" prop="projects">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="projectType != 3">
							<el-form-item label="任务来源" prop="projects">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="projectType != 3">
							<el-form-item label="立项会议名称" prop="projects">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="项目摘要" prop="">
								<el-input v-model="formInline.projectAmount" type="textarea">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目创建时间" prop="">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目创建人" prop="">
								<el-input v-model="formInline.projectAmount"> </el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="会议信息" name="1">
				<MettingCom ref="metting" v-if="state.activeName == 1"></MettingCom>
			</el-tab-pane>
			<el-tab-pane label="计划信息" name="2">
				<!-- :projectId="formInline.projectId" -->
				<ProjectPlan
					:isShow="false"
					:projectId="formInline.projectId"
					v-if="state.activeName == 2"
				></ProjectPlan>
			</el-tab-pane>
			<el-tab-pane label="质量监督" name="3">
				<qualitySuperVision
					v-if="formInline.projectName && state.activeName == 3"
					:form="{
						projectName: formInline.projectName,
						projectCode: formInline.projectCode,
						dealDepartmentId: formInline.dealDepartmentId,
					}"
				></qualitySuperVision>
			</el-tab-pane>
			<el-tab-pane label="资料成果" name="4">
				<databaseCom
					v-if="formInline.projectTypeId && state.activeName == 4"
					:projectTypeId="formInline.projectTypeId"
					:projectId="projectId"
				></databaseCom>
			</el-tab-pane>
		</el-tabs>
		<mapDialog ref="mapdialog"> </mapDialog>
	</div>
</template>
<script setup>
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";

import { ref, reactive, onMounted } from "vue";
import mapDialog from "@/views/constructionProjectManage/projectmanagement/components/mapDialog.vue";
import blockComponents from "@/components/block_components/index.vue";
import ProjectPlan from "./projectPlan.vue";
import qualitySuperVision from "./qualitySupervision.vue";
import databaseCom from "./database.vue";
import MettingCom from "@/views/constructionProjectManage/components/mettingIndex.vue";
import { projectConfigApi } from "@/api/project";
import "@/views/constructionProjectManage/static/button.scss";
import {
	ElTabs,
	ElTabPane,
	ElForm,
	ElFormItem,
	ElInput,
	ElButton,
	ElTableColumn,
} from "element-plus";
import tableIndex from "@/components/table/index.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const projectId = getURLhandler(route.path).id;
const projectType = getURLhandler(route.path).projectType;
const state = reactive({
	activeName: "0",
	dateList: [],
	projectNames: "项目名称",
	selectList: [],
	btnActiveName: "0",
	tableData: [
		{
			date: "111",
		},
	],
	tableHead: [
		{
			prop: "date",
			label: "任务名称",

			style: {
				color: "red",
				rgb: (252, 112, 24),
			},
		},
		{
			prop: "date",
			label: "任务代码",
		},
		{
			prop: "date",
			label: "关注",
			isSvg: ["gz_true", "gz_false"],
		},
		{
			prop: "date",
			label: "工作细项",
		},
		{
			prop: "date",
			label: "作业状态",
		},
		{
			prop: "date",
			label: "计划开始时间",
		},
		{
			prop: "date",
			label: "计划完成时间",
		},
		{
			prop: "date",
			label: "工期",
		},
		{
			prop: "date",
			label: "存在的问题及困难",
		},
		{
			prop: "date",
			label: "责任人",
		},
		{
			prop: "date",
			label: "责任部门",
		},
		{
			prop: "date",
			label: "是否超时",
			isSvg: ["time-out-icon", ""],
		},
		{
			prop: "date",
			label: "实际开始时间",
		},
		{
			prop: "date",
			label: "实际完成时间",
		},
	],
	page: {
		total: 0,
		pageSize: 50,
		currentPage: 1,
	},
});
const mapdialog = ref(null);
let formInline = reactive({
	projectName: "",
	address: "",
	projectCode: "",
	predictStartTime: "",
	predictEndTime: "",
	typeName: "",
	businessUnit: "",
	projectAmount: "",
	projectType: "",
	projectTypeId: "",
	projectSummary: "",
});
const defaultProps = {
	children: "children",
	label: "label",
};
let data = reactive([
	{
		label: "1",
		children: [
			{
				label: "Level two 2-2",
				children: [
					{
						label: "Level three 2-2-2",
					},
				],
			},
		],
	},
	{
		label: "2",
		children: [
			{
				label: "Level two 3-1",
				children: [
					{
						label: "Level three 3-1-1",
					},
				],
			},
			{
				label: "Level two 3-3",
				children: [
					{
						label: "Level three 3-3-1",
					},
				],
			},
		],
	},
]);
const handleNodeClick = (data) => {};
const handleCommand = (data) => {};
const tabHandleClick = (data) => {
	switch (state.btnActiveName) {
		case "0":
			break;
		case "1":
			break;
	}
};

const pageChange = (val) => {
	state.page.currentPage = val;
};
const mapclick = () => {
	if (mapdialog?.value) {
		mapdialog.value.openMap();
	}
};

const getFromData = () => {
	projectConfigApi.getProjectDetail(projectId || "").then((res) => {
		const { data, code, msg } = res;
		if (code == 200) {
			for (let key in data) {
				formInline[key] = data[key];
			}
			console.log("formInline.value", formInline.value);
		}
	});
};

onMounted(() => {
	getFromData();
});
</script>
<style lang="scss" scoped>
.el-form-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.el-select {
		width: 100%;
	}
}

.col_h :deep(.el-form-item__label) {
	line-height: 20px !important;
	text-align: right;
}
</style>
